
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
    <style>
        #login-main{
            width: 500px;
            height: 500px;
            margin-top: 15%;
            margin-left: 20%;
        }
        body{
            background-color: #F2F2F2;
        }
        .login-text{
            font-size: 20px;
        }
        .layui-upload-img{
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="login-main">
        <form class="layui-form" action="#">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="login-text">聊天室</div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="text" name="nickname" id="nickname" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="avatar">
                    </div>
                    <button type="button" class="layui-btn" id="avatar-upload">上传头像</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="login">登录</button>
                </div>
            </div>
        </form>
    </div>
    <script>
        if($.cookie('token')){
            window.location.href = '/test.html';
        }
        layui.use(['form','upload'], function(){
            var form = layui.form;
            var upload = layui.upload;

            var uploadInst = upload.render({
                elem: '#avatar-upload'
                ,url: '/',
                data:{
                    'act':'upload'
                }
                ,done: function(res){
                    $('#avatar').attr('src',res.image);
                    $.cookie('avatar',res.image, { expires: 7, path: '/' });
                }
            });
            $('#login').click(function(){
                var data = {
                    'nickname':$('#nickname').val(),
                    'act':'login',
                    'avatar':$('#avatar').attr('src'),
                };
                $.post('/',data,function(res){
                    var data = JSON.parse(res);
                    // 存入cookie
                    $.cookie('token',data.token, { expires: 7, path: '/' });
                    $.cookie('nickname',data.nickname, { expires: 7, path: '/' });
                    // 跳转聊天室
                    window.location.href = '/test.html';
                });
            })
        });
    </script>
</body>
</html>